<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<meta charset="utf-8">
<style>
    .threed{
        text-align: center;
        color: mediumorchid;
        -webkit-text-stroke: 1px black;
        letter-spacing: 0.04em;
        background-color: white;
        }
</style>
<link rel="stylesheet" href="../../css/rotary.css" />
<script src="../../js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div class="layui-row">
        <h1  class="threed">WebSocket客户端</h1>
        <div class="layui-col-md8 layui-col-md-offset2" style="margin-top: 20px">
            <h1>客户端</h1>
            <div class="layui-card">
                <div class="layui-card-body">

                    <div class="layui-form-item">
                        <label class="layui-form-label">请输入昵称</label>
                        <div class="layui-input-inline" style="width: 300px">
                            <input id="username" type="text" name="title" required  lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
                        </div>
                        <button class="layui-btn"  onclick="connect()">连接</button>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">请发送内容</label>
                        <div class="layui-input-inline" style="width: 300px">
                            <input id="writeMsg" type="text" name="title" required  lay-verify="required" placeholder="请输入要发送的内容" autocomplete="off" class="layui-input">
                        </div>
                        <button class="layui-btn"  onclick="sendMsg()">发送</button>
                    </div>

                </div>
            </div>

            <div class="layui-card" style="margin-top: 100px">
                <div class="layui-card-header">
                    <h1>操作详情</h1>
                </div>

                <div id="content" class="layui-card-body">
                    <h3 align="center" style="color: #007DDB;margin-top: 20px;margin-bottom: 20px">这里将显示操作信息</h3>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript">
var ws = null;
var username = $("#username").val()
var websocketServerInfo;
$(document).ready(function() {
    //ajax调用controller 获得 最新的用户列表和人数
    $.ajax({
        url: "../../configController/websocketServerInfo",
        type: "get",
        dataType: "json",
        success: function (dto) {
            websocketServerInfo = dto.msg;
        }
    });
});
function connect(){
	if(username!=null){
	    $("#content").html('');
		if ('WebSocket' in window){
               ws = new WebSocket(websocketServerInfo+$("#username").val());
		}    
	    else if ('MozWebSocket' in window){
            ws = new MozWebSocket(websocketServerInfo+$("#username").val());
	    }
	    else{
	        alert("该浏览器不支持websocket");    
	    }    
	        
	        
	    ws.onmessage = function(evt) {
            var content = $("#content").html();
            $("#content").html(content+'<div style="text-align: right;margin-bottom: 8px">\n' +
                '                        <p><q style="color: mediumorchid">服务端:</q><span>'+evt.data+ '</span></p>\n' +
                '                    </div>\n' +
                '                    <br/>');
	    };    
	        
	    ws.onclose = function(evt) {
            var content = $("#content").html();
            $("#content").html(content+'<div style="margin-bottom: 8px">\n' +
                '                        <p><q style="color: coral">客户端:</q><span>连接中断</span></p>\n' +
                '                    </div>\n' +
                '                    <br/>');
	    };    
	        
	    ws.onopen = function(evt) {
            $("#content").html('<div style="margin-bottom: 8px">\n' +
                '                        <p><q style="color: coral">客户端:</q><span>连接成功...</span></p>\n' +
                '                    </div>\n' +
                '                    <br/>');
	    };  
	}else{
		alert("请输入您的昵称");
	}
}    
    
function sendMsg() {    
    ws.send($("#writeMsg").val());
    var content = $("#content").html();
    $("#content").html(content+'<div>\n' +
        '                        <p><q style="color: coral">客户端:</q><span>'+$("#writeMsg").val()+ '</span></p>\n' +
        '                    </div>\n' +
        '                    <br/>');
}    
</script>







    <!--转盘-->
    <div class="rotary_box">
        <div class="rotary_fuzhu"></div>
    </div>
    <div class="rotary_wrap">
        <a href="javascript:" class="looper_close" title="Close this thing"></a>
        <div class="rotaryArrow" title="Began to draw" id="rotaryArrow"></div>
        <div class="result">
            <li class="top_rotary">
                <a href="javascript:" id="resultBtn" title="close"><img src="../../images/chacha.png" ></a>
            </li>
            <div class="form">
                <form id="form" name="form" action="" target="actionframe" enctype="multipart/form-data" method="post">
                    <p class="rotary_title">留下您的联系方式即可上门领奖！</p>
                    <div class="input">
                        <span class="prize">奖品：</span>
                        <input class="inp" type="text" style="cursor:not-allowed" readonly id="resultTxt">
                        <input type="hidden" name="jp" id="resultTxt1">
                    </div>
                    <div class="input">
                        <span>姓名：</span>
                        <input class="inp" id="name" type="text" name="name">
                    </div>
                    <div class="input">
                        <span>手机：</span>
                        <input class="inp" id="tel" type="text" name="tel">
                    </div>
                    <div class="input">
                        <input class="submit" type="submit" value="立即领取">
                    </div>
                </form>
                <iframe name="actionframe" type="hidden" style="display: none;" width="0" height="0"></iframe>
            </div>
        </div>
    </div>
    <!--end-->
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../js/jqueryrotate.js"></script>
    <script type="text/javascript" src="../../js/rotary.js"></script>


</body>
</html>
